<template>
  <div class="allservice">
    <div class="allservice-head">
      <h3>全部服务</h3>
    </div>
    <ul>
      <li v-for="item in ServiceList" :key="item.id" @click="jump(item.link)">
        <img :src="item.imgUrl" />
        <p>{{ item.serviceName }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { serviceList } from "@/service/homeService";
export default {
  data() {
    return {
      ServiceList: [],
    };
  },
  methods: {
    onClick(name, title) {
      console.log(title);
    },

    jump(path) {
      this.$router.push(path);
    },
    async getServiceList() {
      const { data } = await serviceList();
      if (data.code !== 200) return this.$toast(data.msg);
      // console.log(data.rows)
      data.rows.forEach((item) => {
        item.imgUrl = "http://124.93.196.45:10001" + item.imgUrl;
      });
      this.ServiceList = data.rows;

      // 返回图片url有误 重新设计
      this.ServiceList[11].imgUrl =
        "https://img2.baidu.com/it/u=2115262808,1725825292&fm=253&fmt=auto&app=120&f=JPEG?w=450&h=408";
      this.ServiceList[12].imgUrl =
        "https://img2.baidu.com/it/u=204804685,389243757&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501";
      this.ServiceList[13].imgUrl =
        "https://img2.baidu.com/it/u=4004644780,472027645&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=493";
      this.ServiceList[14].imgUrl =
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13456849024%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672142467&t=41776970a960d3665cf5b29db526d41f";
      this.ServiceList[15].imgUrl =
        "https://img1.baidu.com/it/u=2596515765,3798820921&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500";

      this.ServiceList.push(
        {
          id: 0,
          serviceName: "政府服务",
          link: "government/index",
          imgUrl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F27616306%2F63403f185a93437da1ce9af77a351c6f.jpeg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvMjc2MTYzMDYvNjM0MDNmMTg1YTkzNDM3ZGExY2U5YWY3N2EzNTFjNmYuanBlZw%3D%3D%2Fsign%2F2b6d81e91d87c730fbb78f3f9fbc22c7.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672127145&t=b05cc13e4dd14fa65d922c3e2fa14e0a",
        },
        {
          id: 111,
          serviceName: "厨房助手",
          link: "cook/index",
          imgUrl:
            "https://img1.baidu.com/it/u=1800476103,1991772940&fm=253&fmt=auto&app=138&f=PNG?w=256&h=256",
        },
        {
          id: 222,
          serviceName: "数字图书馆",
          link: "/libraryList",
          imgUrl:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbkimg.cdn.bcebos.com%2Fpic%2F6f061d950a7b02088e2b15396cd9f2d3562cc80c&refer=http%3A%2F%2Fbkimg.cdn.bcebos.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1672127224&t=eace87c743e6f7544928acc770c7af91",
        },
        {
          id: 333,
          serviceName: "律师资讯",
          link: "/AlllawView",
          imgUrl:
            "https://img2.baidu.com/it/u=1975508238,2348865349&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=382",
        },
        {
          id: 444,
          serviceName: "垃圾分类",
          link: "/CategOrized",
          imgUrl:
            "https://img0.baidu.com/it/u=442023358,3247550236&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=370",
        }
      );
    },
  },
  created() {
    this.getServiceList();
  },
};
</script>

<style lang="scss" scoped>
.allservice {
  .allservice-head {
    height: 80px;
    line-height: 80px;
    text-align: center;
    background: #52a1fe;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30px;
    padding-right: 30px;
    li {
      margin-top: 20px;
      width: 33%;
      img {
        margin: auto;
        display: block;
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
      }
      p {
        font-size: 20px;
        height: 30px;
        width: 100%;
        line-height: 30px;
        text-align: center;
      }
    }
  }
}
</style>
